<template>
  <div class="dy-main AdvantageOfWeekResult">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">周利宝</x-header>
    </div>
    <div class="dy-body">
      <img v-if="status === '0'" class="statusIcon" src="../../assets/img/Insurance/fail.png">
      <img v-if="status === '1'" class="statusIcon" src="../../assets/img/Insurance/success.png">
      <div class="msgInfo">{{ msgType }}</div>
      <div class="userInfo" v-if="type === '1'">
        <dl>
          <dt>账号</dt>
          <dd>{{ accountNumber }}</dd>
        </dl>
        <dl>
          <dt>转存金额</dt>
          <dd>{{ unloadingAmount }}</dd>
        </dl>
        <dl>
          <dt>存期</dt>
          <dd>{{ depositTerm }}</dd>
        </dl>
        <dl>
          <dt>年利率</dt>
          <dd>{{ rateYear }}</dd>
        </dl>
        <dl>
          <dt>到期日</dt>
          <dd>{{ expireDate }}</dd>
        </dl>
      </div>
      <div class="userInfo" v-if="type === '2'">
        <dl>
          <dt>交易日期</dt>
          <dd>{{ dealDate }}</dd>
        </dl>
        <dl>
          <dt>账号</dt>
          <dd>{{ accountNumber }}</dd>
        </dl>
        <dl>
          <dt>本金</dt>
          <dd>{{ transferBalance }}</dd>
        </dl>
      </div>
      <div class="goback" @click="goBack()">返回</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      status: '1',
      type: '',
      accountNumber: '1111 **** **** 2222',
      unloadingAmount: '100,000.00',
      depositTerm: '3个月',
      rateYear: '1.231%',
      expireDate: '2018-09-03',
      dealDate: '2018-09-09',
      transferBalance: '10,000.00'
    }
  },
  computed: {
    msgType () {
      if (this.type === '1') {
        if (this.status === '1') {
          return '恭喜您，周利宝开立成功'
        } else {
          return '很遗憾，周利宝开立失败'
        }
      } else {
        if (this.status === '1') {
          return '恭喜您，周利宝支取成功'
        } else {
          return '很遗憾，周利宝支取失败'
        }
      }
    }
  },
  methods: {
    goBack () {
      this.back()
    },
    back () {
      let lRouter = this.$router ? this.$router : window.history
      this.$publicFun.goBack(this.$store.getters.getRouterHistoryLength, lRouter)
    }
  },
  created () {
    this.type = this.$route.query.type
  }
}
</script>

<style lang="less">
.AdvantageOfWeekResult{
  .dy-body{
    background: #fff;
    .statusIcon{
      height: 1.08rem;
      width: 1.08rem;
      margin: 1.45rem 3.2rem 0.27rem;
    }
    .msgInfo{
      font-size: 0.3rem;
      font-weight: bolder;
      text-align: center;
    }
    .userInfo{
      margin: 1rem 0.3rem;
      background: #FAFAFA;
      border-radius: 0.2rem;
      padding: 0.2rem 0;
      dl{
        display: flex;
        font-size: 0.28rem;
        height: 0.6rem;
        line-height: 0.6rem;
        padding: 0 0.26rem;
        >dt{
          flex: 1;
          text-align: left;
          color: #999999;
        }
        >dd{
          flex: 1;
          text-align: right;
          color: #333333;
        }
      }
    }
    .goback{
      height: 0.88rem;
      width: 3rem;
      margin: 0 auto;
      background: #EC1B30;
      border-radius: 0.06rem;
      color: #fff;
      line-height: 0.88rem;
      text-align: center;
      font-size: 0.34rem;
    }
  }
}
</style>
